<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心语</title>
    <link rel="stylesheet" href="styles.css">

    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

    <!-- 引入 SweetAlert2 的 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="sidebar">
                <div class="sidebar-header">
                    <h3>历史对话记录</h3>
                    <button @click="addConversationPrompt" class="add-conversation-button">新建</button>
                </div>
                <ul class="history-list">
                    <li v-for="(conv, index) in conversations" :key="conv.id">
                        <span @click="selectConversation(conv)" :class="{ active: conv === currentConversation }">
                            {{ conv.name }}
                        </span>
                        <button @click.stop="renameConversation(index)" class="rename-button">✏️</button>
                        <button @click.stop="deleteConversation(index)" class="delete-button">🗑️</button>
                    </li>
                </ul>
            </div>

            <div class="chat-container">
                <div class="chat-header">
                    <h2>心语</h2>
                    <div class="user-info">
                        <img src="images/logo-3.png" alt="User Avatar" class="avatar" @click="toggleMenu">
                        <span id="username-display" @click="toggleMenu" class="user-info-name">
                            {{ displayedUsername }}
                        </span>
                    </div>
                </div>

                <!-- 选择框 -->
                <div v-if="menuVisible" ref="menu" class="menu">
                    <ul>
                        <li @click="showLoginDialog">登录</li>
                        <li @click="showRegisterDialog">注册</li>
                        <li><a href="database-config.html">知识库管理</a></li>
                        <li @click="logout" v-if="isLoggedIn">登出</li>
                    </ul>
                </div>

                <!-- 登录弹窗 -->
                <div v-if="showLogin" class="modal">
                    <div class="modal-content">
                        <span class="close" @click="showLogin = false">&times;</span>
                        <h3 class="h3-sql">登录</h3>
                        <form @submit.prevent="handleLogin">
                            <label for="username" class="label-sql">用户名:</label>
                            <input id="username" type="text" class="text-sql" v-model="username" required>
                            <label for="password" class="label-sql">密码:</label>
                            <input id="password" type="password" class="text-sql" v-model="password" required>
                            <button type="submit" class="button-sql-login">登录</button>
                        </form>
                    </div>
                </div>

                <!-- 注册弹窗 -->
                <div v-if="showRegister" class="modal">
                    <div class="modal-content">
                        <span class="close" @click="showRegister = false">&times;</span>
                        <h3 class="h3-sql">注册</h3>
                        <form @submit.prevent="handleRegister">
                            <label for="reg-username" class="label-sql">用户名:</label>
                            <input id="reg-username" type="text" class="text-sql" v-model="registerUsername" required>
                            <label for="reg-password" class="label-sql">密码:</label>
                            <input id="reg-password" type="password" class="text-sql" v-model="registerPassword"
                                required>
                            <button type="submit" class="button-sql-login">注册</button>
                        </form>
                    </div>
                </div>

                <!-- Chat Messages -->
                <div class="chat-messages" ref="chatMessages">
                    <div v-if="currentConversation && currentConversation.messages">
                        <div v-for="(message, index) in currentConversation.messages" :key="index" :class="{
              'message': true,
              'user-message': message.user,
              'bot-message': !message.user,
              'chart-message': message.chart
            }">
                            <div class="message-content">
                                <div v-if="!message.isTable && !message.chart && !message.isLoading"
                                    v-html="parseMarkdown(message.text)"></div>
                                <div v-else-if="message.isTable" v-html="message.text"></div>
                                <div v-else-if="message.chart" :ref="'chart-' + index" class="chart-container"></div>
                                <div v-else-if="message.isLoading" class="loading-container">
                                    <div class="pulse-loader">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                    <p>正在思考...</p>
                                </div>
                                <!-- 来源文档链接 -->
                                <div v-if="message.sourceDocument" class="source-document">
                                    <a href="#" @click.prevent="openDocument(message.sourceDocument)">
                                        {{ message.sourceDocument.name }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div v-if="isLoading" class="loading-container">
                            <div class="pulse-loader">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <p>正在思考...</p>
                        </div>
                    </div>
                </div>
                <div class="chat-input">
                    <input type="text" v-model="inputMessage" @keyup.enter="sendMessage"
                        placeholder="Type your message...">
                    <button @click="sendMessage">Send</button>
                </div>
            </div>
        </div>

        <!-- 文档内容模态框 -->
        <div v-if="showDocumentModal" class="modal">
            <div class="modal-content-document">
                <span class="close" @click="closeDocumentModal">&times;</span>
                <h3>{{ currentDocument.name }}</h3>
                <pre>{{ currentDocument.content }}</pre>
            </div>
        </div>
    </div>

    <!-- 引入库文件，确保依赖关系正确 -->
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <!-- 引入 markdown-it 的稳定版本 -->
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>

    <!-- 引入 DOMPurify -->
    <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.0/dist/purify.min.js"></script>

    <!-- 引入 SweetAlert2 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- 引入 app.js -->
    <script src="app.js"></script>
</body>

</html>